<template>
    <div class="container">
        <article class="login-block">
        <div class="form-group">
            <span>用户名称</span>
               <input class="form-control" type="text" name="username" pattern="^.[a-z,A-Z,0-9]{1,10}$"  th:title="请输入20字符" v-model="userName">
             </div>
             <div class="form-group">
             <span >用户密码</span>
                <input  class="form-control" type="password" name="password" pattern="^.{1,8}$"  th:title="#{请输入8字符}">
             </div>
             <div class="form-group">
                 <input type="button" value="登录" @click="loginBtn">
             </div>n
               <div  class="form-group tool">
                <a class="btn" >忘记密码</a>
                <a  class="btn" >注册</a>
              </div>
            </article>     
    </div>
   </template>
<script>
    export default {
    name: '',
    data: function(){
    return {
       userName:""
    }
    },
    methods:{
        loginBtn:function(){
            // this.$router.push("/index")
            var that = this;
            window.sessionStorage.setItem("userName",this.userName);
            that.$router.push("/index/home")
        }

    }
    }
   </script>
   <style scoped>
       .container{
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           width: 100%;
           height: 100%;
           /* background-color: aliceblue; */
       }
       .tr{
           width: 200px;
           flex-basis: 50px;
           display: flex;
           flex-direction: row;
           justify-content: space-between;
           background-color: beige;
           align-items: center;
       }
       .second{
           background-color: aqua;
       }
       .tool{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }
        .login-block{
            display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           width: 300px;
           height: 300px;
           border: 1px solid #000000;
        }
   </style>